<template>
	<div class="search-div">
		<div class="tools-div">
			<el-button type="success" size="small" @click="importData">
				导入
			</el-button>
			<el-button type="warning" size="small" @click="exportData">
				导出
			</el-button>
		</div>

		<el-dialog v-model="dialogVisible" title="导入文件" width="50%">
			<el-upload
				class="avatar-uploader"
				action="http://localhost:8501/admin/product/category/importData"
				:headers="mytoken"
				:on-success="handleAvatarSuccess" 
			>
				<el-icon class="avatar-uploader-icon"><Plus /></el-icon>选择excel文件
			</el-upload>
		</el-dialog>

		<el-table
			:data="tableData1"
			style="width: 100%"
			row-key="id"
			border
			lazy
			:load="fetchData"
			:tree-props="props"
		>
			<el-table-column prop="name" label="分类名称" />
			<el-table-column label="图片" #default="scope">
				<img :src="scope.row.imageUrl" />
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" />
		</el-table>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue'

	import { FindByParentId ,ExportData } from '@/api/category'
    import {ElMessageBox ,ElMessage} from 'element-plus'

	let props = { hasChildren: 'hasChildren' }

	let mytoken = {
		token: JSON.parse(window.localStorage['VEA-TOKEN']).token
	}

	let tableData1 = ref([
		{
			id: 2,
			date: '2016-05-04',
			name: 'wangxiaohu',
			address: 'No. 189, Grove St, Los Angeles',
			hasChildren: false,
		},
		{
			id: 3,
			date: '2016-05-01',
			name: 'wangxiaohu',
			hasChildren: true,
			address: 'No. 189, Grove St, Los Angeles',
		},
	])

	//该方法在点击> 时，被执行，查询当前节点数据的下级数据列表，传给resolve( [] ) 方法
	let fetchData = async (row, treeNode, resolve) => {
		//row.id //当前行的分类id
		let { data } = await FindByParentId(row.id)
		resolve(data)
	}

	onMounted(async () => {
		//根据parentId=0，查询一级商品分类列表
		let { data } = await FindByParentId(0)
		tableData1.value = data
	})

	let exportData = () => {
		//确认框
		ElMessageBox.confirm(
			'确定要导出所有分类到excel文档？',
			'Warning',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		)
			.then(() => {
                // http://localhost:8501/admin/product/category/download
                // window.location.href = 'http://localhost:8501/admin/product/category/download' 无法传递token

                //调用导出接口，该接口返回二进制文件
                 ExportData().then(res=>{
                    //利用服务端接口返回的二进制文件封装成一个Blob对象
                    const blob = new Blob([res]);    

                    // 创建a标签 <a></a>      
                    const link = document.createElement('a'); 

                    // <a href='文件链接'></a>   
                    // 为a标签添加一个属性  href = '链接' 利用blob对象构建一个文件链接
                    link.href = window.URL.createObjectURL(blob);


                    // 为a标签定义链接名  <a href='文件链接'>全部商品分类.xlsx</a>   
                    link.download = '全部商品分类.xlsx';

                    //模拟a标签被点击，获取到后端返回的文件
                    link.click();
                 })
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消导出',
				})
			})
	}
 let dialogVisible = ref(false)

 let importData = () => {
		dialogVisible.value = true
	}
let handleAvatarSuccess = (response,uploadFile)=>{
		if(response.code==200){
			ElMessage.success('导入成功')
			dialogVisible.value = false
			fetchData()
		}else{
			ElMessage.warning('导入失败')
		}
	}

</script>

<style scoped>
	.search-div {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}

	.tools-div {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ebeef5;
		border-radius: 3px;
		background-color: #fff;
	}
</style>